<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单属性选择过滤器</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }
  </style>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      // b1  利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值
      $("#b1").click(function () {
        $("input[type='text']:enabled").val("basketball");
      })
      // b2  利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值
      $("#b2").click(function () {
        $("input[type='text']:disabled").val("足球");
      })
      // b3  利用 jQuery 对象的 length 属性获取多选框 选中 的个数
      $("#b3").click(function () {
        var $checkbox = $("input[type='checkbox']:checked");
        console.log($checkbox.length);
      })
      // b4  利用 jQuery 对象的 text() 方法获取下拉框选中的内容
      $("#b4").click(function () {
        var $selects = $("select option:selected");
        $selects.each(function () {
          console.log(this.text);
        })
      })
    })
  </script>
</head>
<body>
<br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的值" id="b1"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 val() 方法改变表单内 type=text 不可用 <input> 元素的值" id="b2"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/><br/><br/>
<input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/><br/><br/>
<hr/><br/>
<input type="text" value="篮球1"/>
<input type="text" value="篮球2"/>
<input type="text" value="篮球3" disabled="true"/>
<input type="text" value="篮球4" disabled="true"/>
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1"/>爱好1
<input type="checkbox" value="爱好2"/>爱好2
<input type="checkbox" value="爱好3"/>爱好3
<input type="checkbox" value="爱好4"/>爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size=9 multiple="multiple">
  <option value="选项1">选项1^^</option>
  <option value="选项2">选项2^^</option>
  <option value="选项3">选项3^^</option>
  <option value="选项4">选项4^^</option>
  <option value="选项5">选项5^^</option>
  <option value="选项6">选项6^^</option>
</select>

<select id="a" name="edu">
  <option value="博士">博士^^</option>
  <option value="硕士">硕士^^</option>
  <option value="本科">本科^^</option>
  <option value="小学">小学^^</option>
</select>
</body>
</html>
